<template>
  <div class="hot-article_box">
    <!-- 标题 -->
    <div class="notice-title">
      <svg-icon class="trumpet" icon-class="huomiao" size="14px" color="red"></svg-icon>
      热门文章
    </div>
    <!-- 内容 -->
    <div class="notice-content">
      <div v-for="(item, index) in hotArticleLists" :key="index" class="">
        <router-link class="item-content" :to="`/article/${item.id}`">
          <span class="item-name">{{ item.title }}</span>
          <!-- <span>{{ item.viewCount }}次浏览</span> -->
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { hotArticleList } from '@/api/article';
import SvgIcon from '@/components/svgIcon/index.vue';
import { onMounted, ref } from 'vue';

const hotArticleLists = ref([]);

onMounted(() => {
  getHotArticle();
});

const getHotArticle = async () => {
  const res = await hotArticleList();
  if (res.code === 200) {
    hotArticleLists.value = res.data;
  }
};
</script>

<style lang="scss" scoped>
.hot-article_box {
  width: 100%;
  background-color: var(--grey-0);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--box-bg-shadow);
  transition: all 0.2s ease-in-out 0s;
  margin-top: 20px;
  padding: 20px;
}

.notice-title {
  font-size: 16px;
}

.notice-content {
  font-size: 14px;
  line-height: 30px;
  color: var(--grey-7);

  .item-content {
    display: flex;
    justify-content: space-between;
  }

  .item-name {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.trumpet {
  animation: trumpet-shake 1s linear infinite;
}

@keyframes trumpet-shake {
  0% {
    transform: rotate(-15deg);
  }

  4% {
    transform: rotate(15deg);
  }

  16% {
    transform: rotate(-22deg);
  }

  20% {
    transform: rotate(22deg);
  }

  8%,
  24% {
    transform: rotate(-18deg);
  }

  12%,
  28% {
    transform: rotate(18deg);
  }

  32% {
    transform: rotate(-12deg);
  }

  36% {
    transform: rotate(12deg);
  }

  40%,
  100% {
    transform: rotate(0deg);
  }
}
</style>
